<template>
  <div class="dy-main BringForwardRegister">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">收款人名册</x-header>
    </div>
  <div class="dy-body">
      <p>{{byx}}</p>
    <div class="dy-wapper">
      <scroller lock-x use-pullup @on-pullup-loading="loadMore" ref="scroller">
      <div class="zy-cardcell pdTop20">
      <div v-for="(item, index) in datalist" :key="index">
      <div class="cards-list" v-if="item.length !== 1" @click="shouwCardsListInfo(index)">
        <div class="img-contant"><img class="bank-type" src="../../assets/img/component/cardWallet.png"></div>
        <div class="name">{{ item[0].cardName }}</div>
        <div class="card-no">{{ item.length }}张</div>
        <img class="jiantou-img" :class="{rotate: show[index] === true}" src="../../assets/img/Fundation/jiantou@2x.png">
        <transition name="slide">
        <div class="card-detail" v-if="show[index] === true">
          <div class="list-detail" v-for="(list,index) in item" :key="index" @click="getInfo(list, 1)">
            <img class="bank-type" :src="list.cardType | bankImg">
            <!-- <div class="bank-name">{{ list.cardType | bankType }}</div> -->
            <div class="bank-name">{{ list.cardPulisherName }}</div>
            <div class="crad-info">{{ list.headerNo }}</div>
          </div>
        </div>
        </transition>
      </div>
      <div class="card-list" v-else @click="getInfo(item, 0)">
        <div class="img-contant"><img class="bank-type-L" :src="item[0].cardType | bankImg"></div>
        <div class="info">
          <div class="name">{{ item[0].cardName }}</div>
          <!-- <div class="bank-info">{{ item[0].cardType | bankType }} {{ item[0].headerNo }}</div> -->
          <div class="bank-info">{{ item[0].cardPulisherName }} <span class="fot28">{{ item[0].headerNo }}</span></div>
        </div>
      </div>
    </div>
      </div>
    </scroller>
    </div>
  </div>
  <div class="dy-footer"><div>{{getUserInfo}}</div></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      byx: '',
      datalist: [
        [
          {
            'cardId': '0b2fa71548ad48c19e0756005a35a015',
            'cardLength': 17,
            'cardName': '王志',
            'cardPulisherCode': '25020344',
            'cardPulisherName': '东亚银行',
            'cardType': '01',
            'headerLength': 10,
            'headerNo': '6222 6666 8888 999',
            'localFlag': '1'
          },
          {
            'cardId': '0b2fa71548ad48c19e0756005a35a015',
            'cardLength': 17,
            'cardName': '王志',
            'cardPulisherCode': '25020344',
            'cardPulisherName': '杭州银行',
            'cardType': '01',
            'headerLength': 10,
            'headerNo': '9002 0000 8888 999',
            'localFlag': '1'
          }
        ],
        [
          {
            'cardId': '0b2fa71548ad48c19e0756005a35a015',
            'cardLength': 17,
            'cardName': '吴明怡',
            'cardPulisherCode': '25020344',
            'cardPulisherName': '东亚银行',
            'cardType': '01',
            'headerLength': 10,
            'headerNo': '7862 7777 7777 999',
            'localFlag': '1'
          }
        ]
      ],
      show: [false],
      showMark: '0', // todo 每次生成新的块需要新的变量控制
      returnData: {
        cardName: '',
        headerNo: '',
        cardPulisherName: ''
      }// 接收返回客户名册数据
    }
  },
  computed: {
    getUserInfo () {
      return this.$store.getters.getcustId
    }
  },
  created () {
    this.getData()
  },
  filters: {
    bankType (type) {
      if (type === '01') {
        return '中国工商银行'
      } else {
        return '中国建设银行'
      }
    },
    bankImg (type) {
      if (type === '01') {
        return require('../../assets/img/cardBgRed.png')
      } else {
        return require('../../assets/img/cardBgYellow.png')
      }
    }
  },
  methods: {
    loadMore () {
      return false
    },
    shouwCardsListInfo (index) {
      if (this.show[index] === true) {
        this.show = []
        this.show[index] = false
      } else {
        this.show = []
        this.show[index] = true
      }
    },
    back () {
      this.$publicFun.goBack(this)
    },
    getInfo (module, isobject) {
      this.returnData.cardName = isobject === 1 ? module.cardName : module[0].cardName
      this.returnData.headerNo = isobject === 1 ? module.headerNo : module[0].headerNo
      this.returnData.cardPulisherName = isobject === 1 ? module.cardPulisherName : module[0].cardPulisherName
      this.setInfoToVuex()
      this.back()
    },
    setInfoToVuex () { // 将信息保存到状态管理
      // 添加信息状态管理
      let lBringForwardInfo = {
        getManName: this.returnData.cardName, // 收款人姓名
        getCardNo: this.returnData.headerNo, // 收款人账号
        getBank: this.returnData.cardPulisherName // 收款银行
      }
      this.$store.commit('setBringForwardInfo', lBringForwardInfo) // 将数据保存到状态管理
    },
    getData () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryPayeeNameList', 'basic_Data': {'clientNo': '1233333', 'payeeName': '李三'}}
        }),
        (response) => {
          // alert(response)
          this.byx = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.returnData = rep.body.arrays
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    }
  }
}
</script>
<style scoped lang="less">
.BringForwardRegister{
  .pdTop20{
    padding-top: .2rem;
  }
  .zy-cardcell{
  .fot28{
    font-size: .28rem;
  }
  .cards-list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
    border: 1px solid #F7F8FA;
    .name{
      font-size: 0.32rem;
      height: 1.2rem;
      width: 5rem;
      line-height: 1.2rem;
    }
    .card-no{
      color: #F28300;
      font-size: 0.32rem;
      height: 1.2rem;
      width: 0.5rem;
      line-height: 1.2rem;
    }
    .jiantou-img{
      height: 0.24rem;
      width: 0.24rem;
      margin: 0.38rem 0.3rem;
      transform: rotate(0deg);
    }
    .rotate{
      transform: rotate(180deg);
    }
    .card-detail{
      width: 100%;
      background: #F7F8FA;
      overflow: hidden;
      .list-detail{
        background: url('../../../static/icon/gary-card-bg.svg') no-repeat center center;
        width: 6.94rem;
        height: 0.9rem;
        display: flex;
        margin: .2rem auto;
        border-radius: .15rem .15rem 0 0;
        .bank-name{
          color: #fff;
          font-size: 0.28rem;
          margin: auto 0;
          width: 30%;
        }
        .crad-info{
          color: #fff;
          font-size: 0.32rem;
          padding: 0.28rem 0;
          width: 51%;
          text-align: right;
        }
        .bank-type{
          height: 0.5rem;
          width: 0.5rem;
          border-radius: 50%;
          margin: auto 0.26rem;
        }
      }
    }
  }
  .card-list{
    background: #fff;
    display: flex;
    width: 100%;
    height: 1.2rem;
    border: 1px solid #F7F8FA;
    .img-contant{
      padding: 0.21rem 0.16rem 0.21rem 0.28rem;
      .bank-type-L{
        height: 0.58rem;
        width: 0.58rem;
        border-radius: 50%;
      }
    }
    .info{
      .name{
        font-size: 0.32rem;
        color: #333;
        padding: 0.15rem 0 .02rem;
      }
      .bank-info{
        font-size: 0.24rem;
        color: #9B9B9B;
      }
    }
  }
  .img-contant{
    padding: 0.29rem 0.16rem 0.29rem 0.28rem;
    .bank-type{
      height: 0.42rem;
      width: 0.58rem;
    }
  }
}
.slide-enter-active, .slide-leave-active { max-height:2rem; transition: max-height .2s ease; }
.slide-enter, .slide-leave-to { max-height: 0; }
}
</style>
<!--
"data":[
        [
            {
                "cardId":"0b2fa71548ad48c19e0756005a35a015",
                "cardLength":17,
                "cardName":"06",
                "cardPulisherCode":"25020344",
                "cardPulisherName":"东亚银行有限公司",
                "cardType":"01",
                "headerLength":10,
                "headerNo":"6223657890",
                "localFlag":"1"
            },
            {
                "cardId":"0b2fa71548ad48c19e0756005a35a015",
                "cardLength":17,
                "cardName":"06",
                "cardPulisherCode":"25020344",
                "cardPulisherName":"东亚银行有限公司",
                "cardType":"01",
                "headerLength":10,
                "headerNo":"6223657890",
                "localFlag":"1"
            }
        ],
        [
            {
                "cardId":"0b2fa71548ad48c19e0756005a35a015",
                "cardLength":17,
                "cardName":"06",
                "cardPulisherCode":"25020344",
                "cardPulisherName":"东亚银行有限公司",
                "cardType":"01",
                "headerLength":10,
                "headerNo":"6223657890",
                "localFlag":"1"
            },
            {
                "cardId":"0b2fa71548ad48c19e0756005a35a015",
                "cardLength":17,
                "cardName":"06",
                "cardPulisherCode":"25020344",
                "cardPulisherName":"东亚银行有限公司",
                "cardType":"01",
                "headerLength":10,
                "headerNo":"6223657890",
                "localFlag":"1"
            }
        ],
        [
            {
                "cardId":"0b2fa71548ad48c19e0756005a35a015",
                "cardLength":17,
                "cardName":"06",
                "cardPulisherCode":"25020344",
                "cardPulisherName":"东亚银行有限公司",
                "cardType":"01",
                "headerLength":10,
                "headerNo":"6223657890",
                "localFlag":"1"
            },
            {
                "cardId":"0b2fa71548ad48c19e0756005a35a015",
                "cardLength":17,
                "cardName":"06",
                "cardPulisherCode":"25020344",
                "cardPulisherName":"东亚银行有限公司",
                "cardType":"01",
                "headerLength":10,
                "headerNo":"6223657890",
                "localFlag":"1"
            }
        ]
    ],
    "head":{
        "chanDate":"20180522",
        "chanTime":"160047",
        "tranCode":"CI009001"
    },
    "result":{
        "code":"ICE000000",
        "message":"成功"
    }
}
-->
